<template>
	<view class="main" :style="'top:'+(-demo.height-demo.top-10)+'px'">
		<view :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>

		<view class="BeInterested" :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<view class="Be_line"></view>
			<view class="Be_all">
				<view class="BeInterested_main">
					<view>请设置您感兴趣的标签(<text>6</text><text>/{{add_TabNum}}</text>)</view>
				</view>
				<view class="Be_tit">
					我们将根据您的选择提供个性化推荐
				</view>
				<view class="Be_input dis_flex">
					<input type="text" v-model="add_Tab" placeholder="请输入自定义的兴趣标签"
						placeholder-style="padding-left:10rpx;" />
					<view class="Be_add" @click="addTab(add_Tab)">
						+添加
					</view>
				</view>
				<view class="Be_tab">
					兴趣标签
				</view>
				<view class="Be_tab_list">
					<view v-for="(item,index) in BeTabList" :key="index" v-if="item!=''">
						<text>{{item}}</text>
						<image @click="deleteTag(index)" src="../../static/icon/qingchu.png" mode="" />
					</view>
				</view>
				<view class="btn" @click="submitForm(BeTabList)">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import head1 from '../../common/head/head'
	export default {
		components: {
			head1
		},
		data() {
			return {
				title: '设置兴趣',
				demo: {
					top: '',
					height: ''
				},
				interest: "",
				add_Tab: "",
				add_TabNum: 0,
				BeTabList: [],
				resumeid: '',
				userId: ""

			}
		},
		computed: {
			userid() {
				return this.$store.state.userId
			},
			getResumeid() {
				return this.$store.state.resumeId
			}
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			// 标签数量
			this.add_TabNum = this.BeTabList.length
			this.userId = this.userid
			this.resumeid = this.userid
			this.getPersonResumeGet()
		},
		methods: {
			addTab(add_Tab) {
				if (add_Tab == '' || add_Tab == null) {
					uni.showModal({
						content: '标签内容不能为空',
						showCancel: false
					});
				} else {
					if (this.add_TabNum <= 5) {
						this.BeTabList.push(add_Tab)
						this.add_TabNum++
					} else {
						uni.showModal({
							content: '最多添加6个标签',
							showCancel: false
						});
					}
				}

			},
			// 删除兴趣标签
			deleteTag(index) {
				// 原始长度
				// var wl_length=this.work_list.length
				this.BeTabList.splice(index, 1)
				this.add_TabNum = this.BeTabList.length-1
			},
			getPersonResumeGet() {
				this.$myResquest.getResumeGet({
					userId: this.userId
				}).then(res => {
					if (res.data.code == 200) {
						let newData = res.data.data.interest
							this.BeTabList = newData.split('@@')
							this.add_TabNum = this.BeTabList.length-1
						
					}
				})
			},
			//提交标签
			submitForm(data) {
				let newData = data.join('@@')
				let resume = this.resumeid
				this.$myResquest.getResumeIntePut({
					interest: newData,
					resumeId: resume
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: "操作成功！"
						})
						setTimeout(() => {
							// 获取页面栈
							let pages = getCurrentPages()
							// 获取上一页栈
							let prevPage = pages[pages.length - 2]
							prevPage.$vm.test()
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: "操作失败！"
						})
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.BeInterested {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;

		.Be_line {
			width: 100%;
			height: 10rpx;
			background: #f4f4f4;
		}

		.Be_all {
			padding: 34rpx;
			box-sizing: border-box;

			.BeInterested_main {
				box-sizing: border-box;

				:first-child {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					display: flex;
					align-items: center;

					text {
						display: block;
						color: #5CD1CE;
						height: 34rpx;

					}
				}



			}

			.Be_tit {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				margin: 24rpx 0 71rpx;
			}

			.Be_input {
				width: 648rpx;
				height: 68rpx;
				border: 2rpx solid #c0c3c8;
				border-radius: 5rpx;

				input {
					width: 528rpx;
					height: 100%;
					padding-left: 20rpx;
				}

				.Be_add {
					width: 120rpx;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					background: #5cd1ce;
					border-radius: 8rpx;
					color: #ffffff;
				}
			}

			.Be_tab {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin: 50rpx 0 31rpx;
			}

			.Be_tab_list {
				display: flex;
				flex-wrap: wrap;

				>view {
					display: flex;
					padding: 7rpx 15rpx;
					box-sizing: content-box;
					height: 38rpx;
					align-items: center;
					border: 1px solid #5cd1ce;
					border-radius: 18rpx;
					margin: 10rpx 5rpx;

					>text {
						color: #5CD1CE;

					}

					image {
						width: 24rpx;
						height: 24rpx;
						margin: 0 4rpx 0 8rpx;
					}
				}
			}

			.btn {
				width: 600rpx;
				height: 88rpx;
				background: #5cd1ce;
				border-radius: 44rpx;
				margin: 170rpx auto;
				line-height: 88rpx;
				text-align: center;
				color: #ffffff;
			}
		}
	}
</style>
